<template>
  <div class="login_wrap">
      <bg-canvas></bg-canvas>
      <div class="login_info">
          <img src="../../assets/sislogo.png" >
          <h1>进思学校管理系统</h1>
          <!--model 数据绑定
            rules 规则绑定
            -->
          <el-form class="myform" :model="userObj" 
          :rules="rules" ref="loginform">
            <el-form-item prop="userName">
                <el-input v-model="userObj.userName">
                    <template slot="prepend">
                        <i class="el-icon-user-solid"></i>
                    </template>
                </el-input>
          
            </el-form-item>
            <el-form-item prop="password">
                <el-input show-password v-model="userObj.password">
                  <template slot="prepend">
                        <i class="el-icon-lock"></i>
                  </template>
                </el-input>
            </el-form-item>
            <el-form-item class="veri_wrap" prop="veriText">
              <el-input v-model="userObj.veriText" placeholder="输入验证码">
                  <template slot="prepend">
                        <i class="el-icon-platform-eleme"></i>
                  </template>
                  
              </el-input>
              <!-- 验证码组件 -->
              <!-- 自定义子传父的事件 sendveri -->
              <veri-com @sendveri="getMyVeri" :veriStr="veri"></veri-com>
            </el-form-item>
            <el-form-item class="btn_item">
                <el-button class="pass" type="primary">忘记密码</el-button>
                <el-button @click="toLogin"  class="login" type="success">登录</el-button>
            </el-form-item>
          </el-form>
      </div>
  </div>
</template>

<script>
import {getVeri,checkVeri,loginApi} from '../../api/login'
// 背景组件
import bgCanvas from './child/bgCanvas'
// 验证码组件
import VeriCom from './child/veri'
export default {
  name: 'JsxyIndex',
  components:{
    bgCanvas,
    VeriCom
  },
  data() {
    return {
      veri:"",//后台返回的验证码
      
      userObj:{
        userName:"",//用户名
        password:"",//密码
        veriText:""//用户输入的验证码
      },//用户输入绑定
      rules:{
        userName:[
          {required:true,message:"用户名必填",trigger:"blur"},
          {min:3,max:10,message:"用户名长度不符合",trigger:"blur"}
        ],//用户名规则
        password:[
           {required:true,message:"密码必填",trigger:"blur"},
           {min:3,max:8,message:"密码长度错误",trigger:"blur"},
           {pattern:/^\w+$/,message:"密码不符合规则",trigger:"blur"}
        ],
        veriText:[{required:true,message:"验证码必填",trigger:"blur"}]
      }
    };
  },
  created(){
    this.getMyVeri();
  },
  mounted() {
    
  },

  methods: {
    async toLogin(){ //去登录
        // 先校验验证码通过 在调用登录接口
        let res=await checkVeri(this.userObj.veriText);
        console.log(res)
        if(res.data.success){
          // 如果验证码通过  进行登录操作
          // 进行登录操作之前 进行表单整体验证
            // 通过ref获取表单组件调用自身的验证方法
            this.$refs.loginform.validate().then(async ()=>{
                  let loginRes=await  loginApi(this.userObj)
                   console.log(loginRes)
                   if(loginRes.data.success){
                    this.$message.success({
                      message:"登录成功",
                      duration:500
                    })
                    // 将后台返回的tokenId存储到localStorage
                    // localStorage.tokenId=res.data.tokenId;
                    // 存储tokenId到vuex
                    // // 通过mutations 去存储数据
                    // this.$store.commit("setToken",res.data.tokenId)
                    // 通过actions去存储数据 
                    this.$store.dispatch("tokenAction",res.data.tokenId)
                    // 将表单重置位初始状态
                     this.$refs.loginform.resetFields();
                    // 不产生历史跳转首页 
                    this.$router.replace("/layout")

                   }
            })
           
        }else{
          // 验证码错误 从新获取验证码
          this.getMyVeri()
        }
    },
    async getMyVeri(){ //获取验证码方法
      let res=await getVeri()
      console.log(res)
      this.veri=res.data.data;
    },
    say(){
      this.$message.success("成功了")
    }
  },
};
</script>
<style lang="less">
    .login_wrap{
      width:100vw;
      height:100vh;
      background:rgb(12,24,84);
      position: absolute;
    }
    .login_info{
      width: 900px;
      height: 600px;
      position: absolute;
      left:0;
      top:0;
      bottom: 0;
      right: 0;
      margin: auto;
      padding: 0 120px;
      box-sizing: border-box;
      h1{
        font-size: 30px;
        color:white;
        margin: 20px auto;
      }
       .btn_item {
        // width: 900px;
        padding: 0;
          .el-form-item__content{
            width: 100%;
            position: relative;
            .pass{
              position: absolute;
              left: -70px;
            }
            .login{
              position: absolute;
              right: -70px;
            }
          }
      }
   
    }
    .veri_wrap .el-form-item__content{
      display: flex;
      .el-input{
        height: 40px;
      }
    }
</style>